<template>
    <div class="modelBox">
        <div class="modelTitle">营销获客工具 助您快速签单</div>
        <div class="modelContent">更快捷 更高效</div>
        <div class="modelBtn">
            <div class="modelBtnItem" v-for="(item, index) in itemList" :key="index">
                <div class="modelImg"></div>
                <div class="modelBtnTitle">{{ item.title }}</div>
                <div class="modelBtnDetail">{{ item.content }}</div>
                <div class="modelBtnDetail">{{ item.detail }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const itemList = ref([
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "",
    },
]);
</script>

<style lang="less" scoped>
.modelBox {
    background: var(--white);
    padding-bottom: 140px;
    .modelBtn {
        display: flex;
        justify-content: center;
        .modelBtnItem {
            width: 315px;
            height: 420px;
            background: var(--white);
            box-shadow: 0px 0px 20px 0px var(--shadow);
            border-radius: 24px;
            margin: 60px 15px 0 15px;
            .modelImg {
                width: 160px;
                height: 160px;
                margin: auto;
                margin-top: 60px;
                background: var(--shadow);
                border-radius: 50%;
            }
            .modelBtnTitle {
                font-weight: 500;
                font-size: 24px;
                color: var(--black);
                text-align: center;
                margin-top: 40px;
            }
            .modelBtnDetail {
                font-weight: 400;
                font-size: 16px;
                color: var(--writLightSix);
                margin-top: 12px;
                text-align: center;
            }
        }
    }
}
.modelTitle {
    font-weight: 600;
    font-size: 40px;
    color: var(--black);
    line-height: 56px;
    width: 100%;
    padding-top: 140px;
    box-sizing: border-box;
    text-align: center;
}
.modelContent {
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    color: var(--black);
    line-height: 28px;
    text-align: center;
    margin-top: 16px;
}
</style>
